<template>
  <div>
    <div class="table-page-search-wrapper">
      <el-card>
        <el-form inline :model="queryParams" @submit.native.prevent>
          <el-row :gutter="48">
            <!-- 搜索item项 -->
            <el-col :md="8" :sm="24">
              <el-form-item label="项目" prop="roleName">
                <el-cascader
                  ref="refCascader"
                  :props="cascaderProps"
                  style="width: 100%"
                  :clearable="false"
                  @change="cascaderChange"
                  v-model="cascaderValue"
                />
              </el-form-item>
            </el-col>
            <!-- 查询按钮 -->
            <el-col :md="16" :sm="24">
              <el-form-item>
                <span class="table-page-search-submitButtons">
                  <el-button type="primary" @click="handleSearch">查 询</el-button>
                  <el-button style="margin-left: 8px" @click="resetQuery">重 置</el-button>
                </span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
    <div class="table-block">
      <el-card>
        <div slot="header" class="clearfix">
          <!-- 左侧修改新增按钮组 -->
          <div class="left">
            施工方案
          </div>
          <!-- 右侧按钮组 -->
          <div class="right">
            <div class="table-operator card-right"></div>
          </div>
        </div>
        <!-- 表格数据列表 -->
        <el-table :data="tableList" stripe :height="tableMaxHeigth" row-key="id" :key="Math.random()">
          <el-table-column prop="lineName" label="项目" align="center" show-overflow-tooltip />
          <el-table-column prop="lotName" label="分部" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="workArea" label="工区" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="projectName" label="审批名称" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="ownershipUnit" label="权属单位" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="status" label="发起审批" align="center" show-overflow-tooltip>
            <template #default="{ row }">
              <span v-if="!row.status"><i style="margin-right: 10px; font-size: 18px; color: #E6A23C;">●</i>未发起</span>
              <span v-if="row.status === 10"><i style="margin-right: 10px; font-size: 18px; color: #909399;">●</i>草稿</span>
              <span v-if="row.status === 20"><i style="margin-right: 10px; font-size: 18px; color: #409EFF;">●</i>审批中</span>
              <span v-if="row.status === 25 || row.status === 26"><i style="margin-right: 10px; font-size: 18px; color: #F56C6C;">●</i>驳回</span>
              <span v-if="row.status === 30"><i style="margin-right: 10px; font-size: 18px; color: #67C23A;">●</i>审批完成</span>
            </template>
          </el-table-column>
          <el-table-column prop="startUserName" label="发起人" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="startTime" label="发起时间" align="center" show-overflow-tooltip>
            <template #default="{ row }">
              {{ row.startTime | formatDate }}
            </template>
          </el-table-column>
          <el-table-column prop="finishTime" label="预计完成时间" align="center" show-overflow-tooltip>
            <template #default="{ row }">
              {{ row.preFinishTime | formatDateDay }}
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="120"
          >
            <template #default="{ row }">
              <el-button
                type="text"
                icon="el-icon-view"
                class="table-button-size"
                title="详情"
                @click="detailHandle(row)"
              ></el-button>
              <el-button
                type="text"
                icon="el-icon-upload2"
                class="table-button-size"
                title="上传"
                v-if="(!row.status || row.status === 10 || (row.status === 25 && row.startUserId === userId)) && menuButtonPermissions.includes('gz-metro-server.constructionScheme.start')"
                @click="uploadHandle(row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row>
          <el-col :span="12" style="padding: 32px 16px; font-size: 14px; font-weight: bold; color: red;">
            <span style="margin-right: 20px;">按时完成：{{ statistics.finishNum }}</span>
            <span style="margin-right: 20px;">未完成：{{ statistics.noFinishNum }}</span>
            <span style="margin-right: 20px;">超时完成：{{ statistics.timeoutFinishNum }}</span>
            <span style="margin-right: 20px;">超时未完成：{{ statistics.timeoutNoFinishNum }}</span>
          </el-col>
          <el-col :span="12">
            <pagination
              :total="total"
              :page.sync="queryParams.pageNo"
              :limit.sync="queryParams.pageSize"
              @pagination="getTableList"
            />
          </el-col>
        </el-row>
      </el-card>
    </div>
  </div>
</template>
<script>
import actions from '@/cros/actions'
import { getTreeByRole } from '@/api/designingScheme'
import { getList, getStatistics } from '@/api/constructionScheme'

import { formatDateDay } from '@/utils/filters'
export default {
  name: 'TablePage',
  data () {
    return {
      tableList: [],
      // 查询参数
      queryParams: {
        orgId: '',
        pageNo: 1,
        pageSize: 10
      },
      menuButtonPermissions: [],
      tableMaxHeigth: 0,
      cascaderValue: [],
      cascaderProps: {
        value: 'id',
        label: 'name',
        children: 'subRes',
        leaf: 'leaf',
        expandTrigger: 'hover',
        lazy: true,
        lazyLoad: async (node, resolve) => {
          return this.getCascaderData(node, resolve)
        }
      },
      total: 0,
      statistics: {
        finishNum: 0,
        timeoutFinishNum: 0,
        noFinishNum: 0,
        timeoutNoFinishNum: 0
      },
      userId: JSON.parse(window.sessionStorage.getItem('userInfo')).userId
    }
  },
  mounted () {
    actions.onGlobalStateChange((state, prevState) => {
      console.log(state, 'statestatestate')
      this.menuButtonPermissions = state.menuButtonPermissions.map((v) => v.buttonKey)
    }, true)
    // 监听窗口大小变化事件
    window.addEventListener('resize', this.setTableHeight)
    // 初始化表格高度
    this.setTableHeight()
  },
  methods: {
    formatDateDay,
    // 获取工区项目树
    async getCascaderData (node, resolve) {
      const { level } = node
      const res = await getTreeByRole({ parent: node.value || '', orgForm: '97' })
      res.data.forEach((v) => {
        v.leaf = v.childNum <= 0
      })
      if (level === 0) {
        this.getTableList()
      }
      return resolve(res.data)
    },
    cascaderChange () {
      this.queryParams.orgId = this.cascaderValue[this.cascaderValue.length - 1]
      this.getTableList()
    },
    beforeDestroy () {
      // 组件销毁前移除事件监听
      window.removeEventListener('resize', this.setTableHeight)
    },
    setTableHeight () {
      this.$nextTick(() => {
        this.tableMaxHeigth = document.body.offsetHeight - 305
      })
    },
    handleSearch () {
      this.queryParams.pageNo = 1
      this.getTableList()
    },
    // 获取统计
    getStatistics () {
      getStatistics().then(res => {
        if (res.code === 'success') {
          this.statistics.finishNum = res.data.finishNum
          this.statistics.timeoutFinishNum = res.data.timeoutFinishNum
          this.statistics.noFinishNum = res.data.noFinishNum
          this.statistics.timeoutNoFinishNum = res.data.timeoutNoFinishNum
        }
      })
    },
    // 获取列表数据
    async getTableList () {
      const res = await getList(this.queryParams)
      this.tableList = res.data.list
      this.total = res.data.totalCount
      this.getStatistics()
    },
    // 重置
    resetQuery () {
      this.cascaderValue = []
      this.queryParams.orgId = ''
      this.queryParams.pageNo = 1
      this.getTableList()
    },
    uploadHandle (row) {
      if (!row.constructionModuleId) {
        return this.$message.warning('请设置审批流程')
      }
      this.$emit('changeShowType', 3, row)
    },
    detailHandle (row) {
      if (!row.constructionModuleId) {
        return this.$message.warning('请设置审批流程')
      }
      this.$emit('changeShowType', 2, row)
    }
  }
}
</script>
<style scoped lang="scss">
.dataCount {
  cursor: pointer;
}
.blurCircle {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #406DA4;
}
.yellowCircle {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ECA600;
}
.left {
  font-weight: 600;
}
</style>
